<!--在panorama.vue versionDate:2022/5/27剥出-->
<template>
  <div class="panorama-container" p>
    <div style="text-align: right;height: 70px">
      <el-button style="margin: 20px 30px 20px 20px"
                 type="primary" size="small" @click="toggle('resp')">
        查看我的岗位合规清单
      </el-button>
      <el-button style="margin: 20px 30px 20px 20px"
                 type="primary" size="small" @click="toggle('all')">
        查看所有岗位合规清单
      </el-button>
    </div>
    <div id="panorama-main" :style="{width: '1200px', height: pHeight}"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import API from "components/api-chat-window";

export default {
  name: 'panorama-container',
  data() {
    return {
      dialogVisible: false,
      type: "",
      pHeight: '850px'
    }
  },
  methods: {
    openDetail(param) {
      if (param.data.type === 'queName' && param.data.bankNo !== undefined) {
        let routeData = this.$router.resolve({
          path: "/riskDetail",
          query: {bankNo: param.data.bankNo}
        });
        window.open(routeData.href, '_blank')
      }
    },
    // 重新计算高度
    refreshHeight(myChart) {
      let elesArr = Array.from(new Set(myChart._chartsViews[0]._data._graphicEls));
      let height = 850;
      let currentHeight = 25 * (elesArr.length - 1) || 10;
      let newHeight = Math.max(currentHeight, height);
      this.pHeight = newHeight + 'px';
      setTimeout(function () {
        myChart.resize();
      }, 200);//睡眠时长要和animationDurationUpdate一致，不然动画会有卡顿

    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById('panorama-main');
      let vue = this;
      var myChart = echarts.init(dom);
      vue.myChart = myChart;
      myChart.on('click', this.openDetail);
      myChart.on('click', function (param) {
        if (param.componentType === 'series' && !param.value) {
          vue.refreshHeight(myChart);
        }
      });
      API.getQaBankTreeInfo({'type': vue.type}).then(res => {
        myChart.hideLoading();
        if (res.result === "1" && res.data) {
          debugger;
          let data = res.data;

          //交替展开
          if (vue.type === 'all') {
            data.children.forEach(function (datum, index) {
              index % 2 === 0 && (datum.collapsed = true);
            });
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption({
            tooltip: {
              trigger: "item",
              triggerOn: "mousemove",
              formatter: function (param) {
                //悬浮框函数
                //当文字过长时换行处理
                let dataName = param.name;
                let name = "";
                let i = 1;
                let length = 30;
                while (i * length < dataName.length) {
                  name += dataName.substr((i - 1) * length, length) + "<br/>";
                  i++;
                }
                name += dataName.substr((i - 1) * length);
                return name;
              }
            },
            series: [
              {
                type: "tree",
                data: [data],
                top: "1%",
                left: "9%",
                bottom: "1%",
                right: "20%",
                symbolSize: 7,
                label: {
                  position: "left",
                  verticalAlign: "middle",
                  align: "right",
                  fontSize: 12,
                  lineHeight: 24,
                  color:"#fff",
                  formatter: function (params) {
                    //console.log(params);
                    let name = params.name;
                    //超过一定文字后截取
                    name = name.length > 14 ? name.substr(0, 13) + "..." : name;
                    switch (params.data.type){
                      case 'areas':
                        name = "{areas|" + name + "}";
                        break;
                      case 'queModule':
                        name = "{queModule|" + name + "}";
                        break;
                      case 'queName':
                        name = "{queName|" + name + "}";
                        break;
                      default:
                        name = "{default|" + name + "}";
                        break;
                    }
                    return name;
                  },
                  rich: {
                    default: {
                      padding: 6,
                      borderRadius: 3,
                      backgroundColor: "#546fc6",
                    },
                    areas: {
                      padding: 6,
                      borderRadius: 3,
                      backgroundColor: "#7ab1a6",
                    },
                    queModule: {
                      padding: 6,
                      borderRadius: 3,
                      backgroundColor: "#bec985",
                    },
                    queName: {
                      padding: 6,
                      borderRadius: 3,
                      backgroundColor: "#fed360",
                    },
                  },
                },
                lineStyle: {
                  color: "#91cd75",
                },
                leaves: {
                  label: {
                    position: "right",
                    verticalAlign: "middle",
                    align: "left",
                  },
                },
                emphasis: {
                  focus: "descendant",
                },
                initialTreeDepth: 2,
                animationDurationUpdate: 200,
              },
            ],
          });
          vue.refreshHeight(myChart);
        }
      })
    },
    toggle(type) {
      this.type = type;
      this.myEcharts();
    }
  },
  mounted() {
    this.type = this.$route.query.type;
    this.myEcharts();
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "panorama-background";
  }
}
</script>
